<template>
  <div class="common-form-wrapper">
    <!--订单表单-->
    <div class="common-form-container with-bottom-sticky-button">
      <el-form ref="form" :model="form" :inline="true" :rules="rules" label-width="120px" label-position="right">
        <!---------------------------------------------订单信息--------------------------------------------------->
        <div>
          <el-divider content-position="left">
            订单信息
            <el-popover content="带 * 号为必填项" trigger="hover">
              <i slot="reference" class="el-icon-question" />
            </el-popover>
          </el-divider>
          <!--境内结算方式 及 币别-->
          <el-row>
            <el-form-item label="境内结算方式:" prop="settleId">
              <el-select v-model.trim="form.settleId" filterable clearable popper-class="common-select-popper" @change="changeSettlement">
                <el-option v-for="item in settlementList" :key="item.id" :label="item.businessType + '-' +(item.accountPeriod ? item.settlementMode + '-' + item.accountPeriod : item.settlementMode)" :value="item.id" class="common-select-option">
                  <span class="left-select-option">{{ item.businessType + ' ' + item.settlementMode }}</span>
                  <span v-if="item.accountPeriod" class="right-select-option">{{ item.accountPeriod }}</span>
                </el-option>
              </el-select>
              <div v-if="businessType" class="tip-message">{{ businessType === 2 ? '海关' : '华富洋' }}开13%增值税票</div>
            </el-form-item>
            <el-form-item label="币别:" class="longer-form-item" prop="currency">
              <el-radio-group v-model="form.currency">
                <el-radio v-for="item in currencyArray" :key="item.value" :label="item.label">{{ item.label }}</el-radio>
              </el-radio-group>
              <el-link type="primary" :icon="showAllSupportCurrency ? 'el-icon-d-arrow-left' : 'el-icon-d-arrow-right'" class="ml12" @click="showMoreCurrency" />
            </el-form-item>
          </el-row>

          <!--供应商名称 及 联系人-->
          <el-row>
            <el-form-item label="供应商名称:" prop="supplierId">
              <el-select v-model.trim="form.supplierId" filterable clearable remote :remote-method="getSupplierList" :loading="supplierLoading" popper-class="common-select-popper" @change="changeSupplier">
                <el-option v-for="item in supplierList" :key="item.id" :label="item.supplierName" :value="item.id" class="common-select-option">
                  <div class="select-title">{{ item.supplierName }}</div>
                  <span class="select-other">{{ item.supplierNameEn }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="供应商联系人:" prop="supplierContactId">
              <el-select v-model.trim="form.supplierContactId" filterable clearable :disabled="!form.supplierId" popper-class="common-select-popper">
                <el-option v-for="item in supplierContactList" :key="item.id" :label="item.name + ' ( ' + (item.tel ? item.tel + ' / ' + item.phone : item.phone) + ' )'" :value="item.id" class="common-select-option">
                  <div class="select-title">{{ item.name }}</div>
                  <span class="select-other">
                    {{ item.tel }}
                    <el-divider direction="vertical" />
                    {{ item.phone }}
                  </span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-row>

          <!--双抬头 指定报关合同号-->
          <el-row v-if="businessType && businessType === 2">
            <el-form-item label="指定报关合同号:" prop="appointContractNo">
              <el-radio-group v-model="form.appointContractNo">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
              <div class="tip-message">报关合同号为报关专用，如需填写请联系商务专员。</div>
            </el-form-item>
            <el-form-item v-if="form.appointContractNo" label="指定报关合同号:" prop="contractNo">
              <el-input v-model.trim="form.contractNo" clearable />
            </el-form-item>
          </el-row>
        </div>

        <!---------------------------------------------商品信息--------------------------------------------------->
        <div class="common-form-table-wrapper">
          <el-divider content-position="left">商品信息</el-divider>
          <el-row class="common-form-table-button-container">
            <el-button icon="el-icon-plus" @click="addOrderMember">新增商品</el-button>
            <el-button icon="el-icon-sold-out" @click="showImportItemDialog">导入商品</el-button>
          </el-row>
          <!--商品列表-->
          <el-table ref="table" :data="form.members" highlight-current-row max-height="360px" show-summary :summary-method="getSummaries" empty-text="请新增商品" class="common-form-table">
            <el-table-column type="index" label="序号" fixed width="55" />
            <el-table-column label="操作" fixed width="55">
              <template slot-scope="scope">
                <el-link icon="el-icon-delete" :underline="false" @click="deleteMember(scope.row)" />
              </template>
            </el-table-column>
            <el-table-column label="商品型号" prop="model" width="150">
              <template slot="header">
                <span class="required-header">商品型号</span>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'members.' + scope.$index + '.model'" :rules="rules.memberRules.model">
                  <el-autocomplete
                    v-model.trim="scope.row.model"
                    placeholder="按型号查询"
                    popper-class="common-autocomplete"
                    :fetch-suggestions="(queryString, cb) => queryItem(queryString, cb, 'model')"
                    @select="(item) => selectCommodity(item, scope.$index)"
                  >
                    <template slot-scope="{ item }">
                      <div class="select-title">{{ item.model }}</div>
                      <span class="select-other">
                        {{ item.name }}
                        <el-divider direction="vertical" />
                        {{ item.brand }}
                        <el-divider direction="vertical" />
                        {{ item.unit }}
                        <el-divider direction="vertical" />
                        {{ item.origin }}
                      </span>
                    </template>
                  </el-autocomplete>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="name" width="150">
              <template slot-scope="scope">
                <el-form-item :prop="'members.' + scope.$index + '.name'">
                  <el-autocomplete
                    v-model.trim="scope.row.name"
                    placeholder="按名称查询"
                    popper-class="common-autocomplete"
                    :fetch-suggestions="(queryString, cb) => queryItem(queryString, cb, 'name')"
                    @select="(item) => selectCommodity(item, scope.$index)"
                  >
                    <template slot-scope="{ item }">
                      <div class="select-model">{{ item.name }}</div>
                      <span class="select-other">
                        {{ item.model }}
                        <el-divider direction="vertical" />
                        {{ item.brand }}
                        <el-divider direction="vertical" />
                        {{ item.unit }}
                        <el-divider direction="vertical" />
                        {{ item.origin }}
                      </span>
                    </template>
                  </el-autocomplete>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="商品品牌" prop="brand" width="150">
              <template slot="header">
                <span class="required-header">商品品牌</span>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'members.' + scope.$index + '.brand'">
                  <el-autocomplete
                    v-model.trim="scope.row.brand"
                    placeholder="按品牌查询"
                    popper-class="common-autocomplete"
                    :fetch-suggestions="(queryString, cb) => queryItem(queryString, cb, 'brand')"
                    @select="(item) => selectCommodity(item, scope.$index)"
                  >
                    <template slot-scope="{ item }">
                      <div class="select-model">{{ item.brand }}</div>
                      <span class="select-other">
                        {{ item.model }}
                        <el-divider direction="vertical" />
                        {{ item.name }}
                        <el-divider direction="vertical" />
                        {{ item.unit }}
                        <el-divider direction="vertical" />
                        {{ item.origin }}
                      </span>
                    </template>
                  </el-autocomplete>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="单位" prop="unit" width="100">
              <template slot="header">
                <span class="required-header">单位</span>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'members.' + scope.$index + '.unit'">
                  <el-select v-model.trim="scope.row.unit" filterable clearable>
                    <el-option v-for="item in $store.getters.dictSelectData.escm_unit" :key="item.value" :value="item.value" :label="item.label" />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="数量" prop="qty" width="120">
              <template slot="header">
                <span class="required-header">数量</span>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'members.' + scope.$index + '.qty'">
                  <el-input-number v-model.trim="scope.row.qty" :controls="false" @change="(currentValue, oldValue) => calculatePrice(scope, false)" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="单价" prop="price" width="120">
              <template slot="header">
                <span class="required-header">单价</span>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'members.' + scope.$index + '.price'">
                  <el-input-number v-model.trim="scope.row.price" :controls="false" @change="(currentValue, oldValue) => calculatePrice(scope, false)" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="金额" width="120">
              <template slot-scope="scope">
                <el-form-item :prop="'members.' + scope.$index + '.totalPrice'">
                  <el-input-number v-model.trim="scope.row.totalPrice" :controls="false" @change="(currentValue, oldValue) => calculatePrice(scope, true)" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="产地" prop="origin" width="100">
              <template slot="header">
                <span class="required-header">产地</span>
              </template>
              <template slot-scope="scope">
                <el-form-item :prop="'members.' + scope.$index + '.origin'">
                  <el-select v-model.trim="scope.row.origin" filterable clearable>
                    <el-option v-for="item in $store.getters.dictSelectData.escm_origin_country" :key="item.value" :value="item.value" :label="item.label" />
                  </el-select>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="净重(KG)" prop="nw">
              <template slot-scope="scope">
                <el-form-item :prop="'members.' + scope.$index + '.nw'">
                  <el-input-number v-model.trim="scope.row.nw" :controls="false" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="毛重(KG)" prop="gw">
              <template slot-scope="scope">
                <el-form-item :prop="'members.' + scope.$index + '.gw'">
                  <el-input-number v-model.trim="scope.row.gw" :controls="false" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="物料号" prop="pn">
              <template slot-scope="scope">
                <el-form-item :prop="'members.' + scope.$index + '.pn'">
                  <el-input v-model.trim="scope.row.pn" clearable />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="PO号" prop="poNo">
              <template slot-scope="scope">
                <el-form-item :prop="'members.' + scope.$index + '.poNo'">
                  <el-input v-model.trim="scope.row.poNo" clearable />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="件数" prop="packages">
              <template slot-scope="scope">
                <el-form-item :prop="'members.' + scope.$index + '.packages'">
                  <el-input-number v-model.trim="scope.row.packages" :controls="false" />
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="供应商发票号" prop="supplierInvoiceNo" width="110">
              <template slot-scope="scope">
                <el-form-item :prop="'members.' + scope.$index + '.supplierInvoiceNo'">
                  <el-input v-model.trim="scope.row.supplierInvoiceNo" clearable />
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>

          <!--导入明细窗口-->
          <TemplateImport ref="importMemberDialog" title="批量上传产品" :baba="this" template-file-id="1356171993041108993" />
        </div>

        <!---------------------------------------------境外结算--------------------------------------------------->
        <div>
          <el-divider content-position="left">境外结算</el-divider>
          <!--境外结算方式 及 支付方式-->
          <el-row>
            <el-form-item label="境外结算方式:" prop="payStyle">
              <el-radio-group v-model="form.payStyle">
                <el-radio :label="0">送货前付款</el-radio>
                <el-radio :label="1">送货收票</el-radio>
                <el-radio :label="2">送货后付款</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.payStyle === 0 || form.payStyle === 1" label="支付方式:" prop="payFeeStyle">
              <el-radio-group v-model="form.payFeeStyle">
                <!--送货前付款-->
                <el-radio v-if="form.payStyle === 0" :label="0">转账</el-radio>
                <el-radio v-if="form.payStyle === 0" :label="1">信用证</el-radio>
                <!--送货收票-->
                <el-radio v-if="form.payStyle === 1" :label="2">支票</el-radio>
                <el-radio v-if="form.payStyle === 1" :label="3">期票</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>

          <!--送货前付款 送货收票-->
          <el-row v-if="form.payStyle === 0 || form.payStyle === 1">
            <el-form-item label="本次付款金额:" prop="temFee">
              <el-input v-model="form.temFee" class="input-with-select">
                <el-select slot="prepend" v-model="payPercent" placeholder="请选择付款比例" @change="changePayPercent">
                  <el-option v-for="item in payPercentList" :key="item" :label="item * 100 + '%'" :value="item" />
                </el-select>
              </el-input>
            </el-form-item>
            <!--送货前付款 信用证 信用证天数-->
            <el-form-item v-if="form.payStyle === 0 && form.payFeeStyle === 1" label="信用证天数:" prop="ticketDay">
              <el-input-number v-model="form.ticketDay" :controls="false" />
            </el-form-item>
            <!--送货收票 期票 期票天数-->
            <el-form-item v-if="form.payStyle === 1 && form.payFeeStyle === 3" label="期票天数:" prop="termBillDay">
              <el-input-number v-model="form.termBillDay" :controls="false" />
            </el-form-item>
          </el-row>

          <!--送货前付款 信用证附件-->
          <el-row v-if="form.payStyle === 0 && form.payFeeStyle === 1">
            <el-form-item label="信用证附件:">
              <FileUpload ref="lcFile" :file-tag="1" :max-size="5 * 1024 * 1024" accept="doc,jpg,png" />
            </el-form-item>
          </el-row>

          <!--送货前付款 送货收票-->
          <el-row v-if="form.payStyle === 0 || form.payStyle === 1">
            <el-form-item label="收款方户名:" prop="supplierBank.id">
              <el-select v-model.trim="form.supplierBank" value-key="id" filterable clearable remote :remote-method="getSupplierBankList" :loading="supplierBankLoading" :disabled="!form.supplierId" popper-class="common-select-popper">
                <el-option v-for="item in supplierBankList" :key="item.id" :label="item.accountName" :value="item" class="common-select-option">
                  <div class="select-title">{{ item.accountName }}</div>
                  <!--送货前付款才显示帐号-->
                  <span v-if="form.payStyle === 0" class="select-other">
                    {{ item.accountNo }}
                    <el-divider direction="vertical" />
                    {{ item.bankName }}
                    <el-divider direction="vertical" />
                    {{ item.bankSwiftCode }}
                  </span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item v-if="form.payStyle === 0" label="收款人账号:">
              <el-input :value="form.supplierBank ? form.supplierBank.accountNo : ''" readonly />
            </el-form-item>
          </el-row>

          <!--送货前付款 送货收票-->
          <el-row v-if="form.payStyle === 0">
            <el-form-item label="开户银行:">
              <el-input :value="form.supplierBank ? form.supplierBank.bankName : ''" readonly />
            </el-form-item>
            <el-form-item label="Swift Code:">
              <el-input :value="form.supplierBank ? form.supplierBank.bankSwiftCode : ''" readonly />
            </el-form-item>
          </el-row>
        </div>

        <!---------------------------------------------香港物流--------------------------------------------------->
        <div>
          <el-divider content-position="left">
            香港物流
            <el-popover title="交货要求" trigger="hover">
              <i slot="reference" class="el-icon-question" />
              <div slot>
                1、报订单号<br>
                2、随货附装箱单，发票各一式三份<br>
                3、快递交货提前提供快递单号<br>
                4、货物标签需体现型号、 数量、品牌、产地且标签面对外，不接受手写标签<br>
                5、来货超出1卡板，请提前致电12345678预约
              </div>
            </el-popover>
          </el-divider>
          <!--到货类型-->
          <el-row>
            <el-form-item label="到货类型:" prop="arrivalType">
              <el-radio-group v-model="form.arrivalType">
                <el-radio :label="1">供应商送货</el-radio>
                <el-radio :label="2">华富洋提货</el-radio>
                <el-radio :label="3">快递到货</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <!--华富洋提货-->
          <el-row v-if="form.arrivalType === 2">
            <el-form-item label="提货类型:" prop="pickType">
              <el-radio-group v-model="form.pickType">
                <el-radio :label="0">单个提货点</el-radio>
                <el-radio :label="1">多个提货点</el-radio>
              </el-radio-group>
              <!--多点提货 提货提示-->
              <div v-if="form.pickType === 1" class="tip-message">多个提货点提货时请在订单保存后至 提货安排 中新增</div>
            </el-form-item>
            <!--单个提货点-->
            <el-form-item v-if="form.pickType === 0" label="提货时间:" prop="pickTime">
              <el-date-picker v-model="form.pickTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" />
            </el-form-item>
          </el-row>

          <!--华富洋提货 单个提货点-->
          <el-row v-if="form.arrivalType === 2 && form.pickType === 0">
            <el-form-item label="提货件数:" class="pick-numbers-form-item">
              <el-input v-model="form.totalPallet">
                <template slot="append">板</template>
              </el-input>
              <el-input v-model="form.totalPackage">
                <template slot="append">箱</template>
              </el-input>
            </el-form-item>
            <el-form-item label="提货单号:" prop="pickNo">
              <el-input v-model.trim="form.pickNo" clearable />
            </el-form-item>
          </el-row>

          <!--华富洋提货 单个提货点 提货地址-->
          <el-row v-if="form.arrivalType === 2 && form.pickType === 0">
            <el-form-item label="提货地址:" prop="pickAddress.id">
              <el-select v-model.trim="form.pickAddress" value-key="id" filterable clearable remote :remote-method="getPickAddressList" :loading="pickAddressLoading" :disabled="!form.supplierId" popper-class="common-select-popper">
                <el-option v-for="item in pickAddressList" :key="item.id" :label="item.address" :value="item" class="common-select-option">
                  <div class="select-title">{{ item.address }}</div>
                  <span class="select-other">
                    {{ item.name }}
                    <el-divider direction="vertical" />
                    {{ item.tel }}
                    <el-divider direction="vertical" />
                    {{ item.phone }}
                  </span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="联系人及电话:">
              <el-input :value="buildPickAddressInfo()" readonly />
            </el-form-item>
          </el-row>

          <!--华富洋提货 单个提货点 提货附件-->
          <el-row v-if="form.arrivalType === 2 && form.pickType === 0">
            <el-form-item label="提货附件:">
              <FileUpload ref="pickFile" :file-tag="2" :max-size="5 * 1024 * 1024" accept="doc,jpg,png" />
            </el-form-item>
          </el-row>

          <!--快递到货-->
          <el-row v-if="form.arrivalType === 3">
            <el-form-item label="运营商:" prop="overseasExpress">
              <el-select v-model.trim="form.overseasExpress" filterable clearable allow-create>
                <el-option v-for="item in $store.getters.dictSelectData.escm_overseas_expresss_company" :key="item.value" :value="item.value" :label="item.label" />
              </el-select>
              <div class="tip-message">可手动录入其他运营商</div>
            </el-form-item>
            <el-form-item label="快递单号:" prop="expressNo">
              <el-input v-model.trim="form.overseasExpressNo" />
              <div class="tip-message">多个快递单号时请用 / 分隔</div>
            </el-form-item>
          </el-row>
        </div>

        <!---------------------------------------------国内物流--------------------------------------------------->
        <div>
          <el-divider content-position="left">
            国内物流
            <el-popover title="配送说明" trigger="hover">
              <i slot="reference" class="el-icon-question" />
              <div slot>
                默认配送时间：工作日周一至周五9:00 - 18:00<br>
                如贵司在非工作时段或节假日可收货，请在备注栏说明
              </div>
            </el-popover>
          </el-divider>
          <!--收货方式 与 交货类型-->
          <el-row>
            <el-form-item label="收货方式:" prop="receivingMode">
              <el-radio-group v-model="form.receivingMode" @change="changeReceivingMode">
                <el-radio :label="0">客户自提</el-radio>
                <el-radio :label="1">华富洋送货</el-radio>
                <el-radio :label="2">第三方物流</el-radio>
              </el-radio-group>
            </el-form-item>
            <!--非客户自提才显示交货类型-->
            <el-form-item v-if="form.receivingMode === 1 || form.receivingMode === 2" label="交货类型:" prop="deliveryType">
              <el-radio-group v-model="form.deliveryType" @change="changeDeliveryType">
                <el-radio :label="0">单个交货点</el-radio>
                <el-radio :label="1">多个交货点</el-radio>
              </el-radio-group>
              <!--多点交货提示-->
              <div v-if="form.deliveryType === 1" class="tip-message">多个交货点请在订单保存后至 收货安排 中新增</div>
            </el-form-item>
          </el-row>
          <div v-if="(form.receivingMode === 1 || form.receivingMode === 2) && form.deliveryType === 0">
            <!--发运要求-->
            <el-row v-if="form.receivingMode === 2">
              <el-form-item label="发运要求:" prop="shippingRequirement">
                <el-radio-group v-model="form.shippingRequirement">
                  <el-radio v-for="item in $store.getters.dictSelectData.escm_shipping_requirement" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <!--运营商 及 时效要求-->
            <el-row>
              <el-form-item :label="form.receivingMode == 2 ? '物流商:' : '承运商:'" prop="expressCompany">
                <el-select v-model.trim="form.expressCompany" value-key="value" filterable clearable :disabled="disabledExpressCompany" @change="changeExpressCompany">
                  <el-option v-for="item in $store.getters.dictSelectData[form.receivingMode == 2 ? 'escm_express_company' : 'escm_self_express_company']" :key="item.id" :value="item" :label="item.label" />
                </el-select>
              </el-form-item>
              <el-form-item label="时效要求:" prop="timelinessRequirement">
                <el-select v-model.trim="form.timelinessRequirement" filterable clearable :disabled="!form.expressCompany">
                  <el-option v-for="item in timelinessRequirementList" :key="item.value" :value="item.value" :label="item.label" />
                </el-select>
              </el-form-item>
            </el-row>
            <!--送货方式 费用区间-->
            <el-row>
              <el-form-item v-if="form.receivingMode === 2" label="送货方式:" prop="deliveryMode">
                <el-select v-model.trim="form.deliveryMode" filterable clearable>
                  <el-option v-for="item in $store.getters.dictSelectData.escm_delivery_mode" :key="item.value" :value="item.value" :label="item.label" />
                </el-select>
              </el-form-item>
              <el-form-item v-if="form.receivingMode === 2" label="费用区间" prop="costRange">
                <el-select v-model.trim="form.costRange" filterable clearable>
                  <el-option v-for="item in $store.getters.dictSelectData.escm_cost_range" :key="item.value" :value="item.value" :label="item.label" />
                </el-select>
              </el-form-item>
              <el-form-item v-if="form.receivingMode === 1" label="要求发货时间:" prop="pickTime">
                <el-date-picker v-model="form.pickTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" />
              </el-form-item>
            </el-row>
            <!--收货地址 收货公司-->
            <el-row>
              <el-form-item label="收货地址:" prop="deliveryAddress.id">
                <el-select v-model.trim="form.deliveryAddress" value-key="id" filterable clearable remote :remote-method="getDeliveryAddressList" :loading="deliveryAddressLoading" popper-class="common-select-popper">
                  <el-option v-for="item in deliveryAddressList" :key="item.id" :label="item.address" :value="item" class="common-select-option">
                    <div class="select-title">{{ item.address }}</div>
                    <span class="select-other">
                      {{ item.company }}
                      <el-divider direction="vertical" />
                      {{ item.name }}
                      <el-divider direction="vertical" />
                      {{ item.tel }}
                      <el-divider direction="vertical" />
                      {{ item.phone }}
                    </span>
                  </el-option>
                  <!-- <el-pagination small layout="prev, pager, next" :total="50" /> -->
                </el-select>
              </el-form-item>
              <el-form-item label="收货公司:">
                <el-input :value="form.deliveryAddress ? form.deliveryAddress.company : ''" readonly />
              </el-form-item>
            </el-row>
            <!--联系人和电话及费用区间-->
            <el-row>
              <el-form-item label="联系人及电话:">
                <el-input :value="buildDeliveryAddressInfo()" readonly />
              </el-form-item>
              <el-form-item v-if="businessType && businessType === 1" label="发票随货:" prop="withInvoice">
                <el-radio-group v-model="form.withInvoice">
                  <el-radio :label="true">是</el-radio>
                  <el-radio :label="false">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-row>
            <!--备注 及 文件-->
            <el-row>
              <el-form-item label="备注:" prop="memo">
                <el-input v-model.trim="form.memo" type="textarea" :autosize="{ minRows: 5}" maxlength="100" show-word-limit />
              </el-form-item>
              <el-form-item label="附件:">
                <FileUpload ref="deliveryFile" :file-tag="3" :max-size="5 * 1024 * 1024" accept="doc,jpg,png" />
              </el-form-item>
            </el-row>
          </div>
        </div>
        <!---------------------------------------------备注及其他--------------------------------------------------->
        <div>
          <el-divider content-position="left">备注及其他</el-divider>
          <!--特殊关系和影响报关价格-->
          <el-row>
            <el-form-item prop="special">
              <el-tooltip slot="label" effect="light" content="买卖双方是否存在特殊关系">
                <span>特殊关系:</span>
              </el-tooltip>
              <el-radio-group v-model="form.special">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-if="form.special" prop="effectDeclarationPrice">
              <el-tooltip slot="label" effect="light" content="此特殊关系是否影响商品报关价格">
                <span>影响报关价格:</span>
              </el-tooltip>
              <el-radio-group v-model="form.effectDeclarationPrice">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-row>
          <!--备注-->
          <el-row>
            <el-form-item label="备注:" prop="remark">
              <el-input v-model.trim="form.remark" type="textarea" :autosize="{ minRows: 5}" maxlength="250" show-word-limit />
            </el-form-item>
          </el-row>
          <!--发票及装箱单-->
          <el-row>
            <el-form-item label="发票:">
              <FileUpload ref="invoiceFile" :file-tag="1" :max-size="5 * 1024 * 1024" accept="doc,jpg,png" other-tip="请上传供应商出具的INVOICE" />
            </el-form-item>
            <el-form-item label="装箱单:">
              <FileUpload ref="packingListFile" :file-tag="1" :max-size="5 * 1024 * 1024" accept="doc,jpg,png" other-tip="请上传供应商出具的PACKING LIST" />
            </el-form-item>
          </el-row>
        </div>
      </el-form>
    </div>
    <BottomFixedButtonContainer>
      <template slot="buttons">
        <el-button type="primary" @click="submitForm">暂存</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </template>
    </BottomFixedButtonContainer>
  </div>
</template>

<script>
import { settlementList, supplierList, supplierContactList, supplierBankList, pickAddressList, materialList, deliveryAddressList } from '@/api/hfy/escm'
import { selectByPid } from '@/api/system/dict'
import { divide, mul, add } from '@/utils/calculate'
import FileUpload from '@/components/FileUpload'
import TemplateImport from '@/components/TemplateImport'
import BottomFixedButtonContainer from '@/components/BottomFixedButtonContainer'
import { getDictSelectData, strJoin } from '@/utils/common'
import { createRequiredValidator } from '@/utils/validate'
export default {
  name: 'BookingOrderCreate2',
  components: { FileUpload, TemplateImport, BottomFixedButtonContainer },
  data() {
    const modelValidator = createRequiredValidator('商品型号必填')
    return {
      form: {
        // 订单信息
        settleId: '', supplierId: '', currency: '', supplierContactId: '', appointContractNo: '', contractNo: '',
        // 商品信息
        members: [],
        // 境外结算
        payStyle: '', payFeeStyle: '', temFee: undefined, ticketDay: undefined, termBillDay: undefined,
        // 供应商银行
        supplierBank: { id: '', accountName: '', accountNo: '', bankName: '', bankSwiftCode: '' },
        // 香港物流
        arrivalType: '', pickType: '', pickTime: '', totalPallet: undefined, totalPackage: undefined, pickNo: '', overseasExpress: '', overseasExpressNo: '',
        // 提货地址
        pickAddress: { id: '', address: '', name: '', tel: '', phone: '' },
        // 国内物流
        receivingMode: '', deliveryType: '', expressCompany: { id: '', label: '', value: '' }, timelinessRequirement: '', shippingRequirement: '', deliveryMode: '',
        // 收货地址
        deliveryAddress: { id: '', address: '', name: '', tel: '', phone: '', withInvoice: '' },
        // 备注及其他
        special: '', effectDeclarationPrice: '', remark: ''
      },
      // 境内结算方式,即方案下拉
      settlementList: [], businessType: '',
      // 供应商下拉
      supplierList: [], supplierLoading: false,
      // 供应商联系人
      supplierContactList: [],
      // 支持的币别 和 展示的币别
      currencyList: [], currencyArray: [], showAllSupportCurrency: true,
      // 订单明细合计
      totalQty: 0, totalPrice: 0,
      // 供应商银行下拉
      supplierBankList: [], supplierBankLoading: false,
      // 付款比例下拉 付款总额
      payPercent: '', payPercentList: [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1],
      // 提货地址
      pickAddressList: [], pickAddressLoading: false,
      // 时效要求 收货地址
      disabledExpressCompany: false, timelinessRequirementList: [], deliveryAddressList: [], deliveryAddressLoading: false,
      rules: {
        settleId: [
          { required: true, message: '境内结算方式必填', trigger: 'change' }
        ],
        currency: [
          { required: true, message: '币别必选', trigger: 'change' }
        ],
        supplierId: [
          { required: true, message: '供应商必选', trigger: 'change' }
        ],
        memberRules: {
          model: { required: true, validator: modelValidator, trigger: 'change' }
        }
      }
    }
  },
  created() {
    // 结算方式
    this.getSettlementList()
    // 币制
    this.getCurrenyList()
    // 供应商
    this.getSupplierList()
    // 单位下拉
    getDictSelectData('escm_unit')
    // 产地下拉
    getDictSelectData('escm_origin_country')
    // 境外快递运营商
    getDictSelectData('escm_overseas_expresss_company')
    // 发运要求
    getDictSelectData('escm_shipping_requirement')
    // 国内承运商
    getDictSelectData('escm_express_company')
    // 自营承运商
    getDictSelectData('escm_self_express_company')
    // 送货方式
    getDictSelectData('escm_delivery_mode')
    // 费用区间
    getDictSelectData('escm_cost_range')
  },
  methods: {
    // 获取结算方式
    getSettlementList() {
      settlementList().then(res => {
        this.settlementList = res
      })
    },
    // 变更抬头 单抬头1 双抬头2
    changeSettlement(id) {
      const selectedSettlement = this.settlementList.find(item => item.id === id)
      if (selectedSettlement) {
        this.businessType = selectedSettlement.businessType.indexOf('单抬头') !== -1 ? 1 : 2
      } else {
        this.businessType = ''
      }
    },
    // 获取币制
    getCurrenyList() {
      getDictSelectData('escm_curreny').then(res => {
        this.currencyList = res
        // 初始只显示前2个币制
        this.showMoreCurrency()
      })
    },
    // 展示更多币制
    showMoreCurrency() {
      this.showAllSupportCurrency = !this.showAllSupportCurrency
      // 是否展示所有币制, 默认只展示前2个
      if (this.showAllSupportCurrency) {
        this.currencyArray = this.currencyList
      } else {
        this.currencyArray = this.currencyList.slice(0, 2)
      }
    },
    // 获取供应商
    getSupplierList(query) {
      this.supplierLoading = true
      const _this = this
      setTimeout(() => {
        supplierList({ keyword: query, page: 1, size: 10 }).then(res => {
          _this.supplierList = res
          _this.supplierLoading = false
        }).catch(() => { _this.supplierLoading = false })
      }, 200)
    },
    // 变更供应商
    changeSupplier(supplierId) {
      // 刷新供应商联系人
      this.form.supplierContactId = ''
      this.getSupplierContactList(supplierId)
      // 刷新供应商银行即收款方
      this.form.supplierBank = ''
      this.getSupplierBankList()
      // 刷新提货地址
      this.form.pickAddress = ''
      this.getPickAddressList()
    },
    // 获取供应商联系人
    getSupplierContactList() {
      const supplierId = this.form.supplierId
      if (supplierId) {
        supplierContactList({ supplierId: supplierId }).then(res => {
          this.supplierContactList = res
        })
      }
    },
    // 添加商品
    addOrderMember() {
      this.form.members.push({
        model: '', name: '', unit: '', price: undefined, qty: undefined, totalPrice: undefined,
        brand: '', origin: '', packages: undefined, pn: '', nw: undefined,
        gw: undefined, poNo: '', involveRoyalty: undefined, gs: '', zjgs: ''
      })
    },
    // 根据key查询商品
    queryItem(queryString, cb, key) {
      setTimeout(() => {
        materialList({ keyword: queryString, page: 1, size: 10 }).then(res => {
          // 调用 callback 返回建议列表的数据
          cb(res)
        }).catch(() => cb([]))
      }, 350)
    },
    // 选择查询出来的商品
    selectCommodity(item, index) {
      this.form.members[index].model = item.model
      this.form.members[index].name = item.name
      this.form.members[index].brand = item.brand
      this.form.members[index].unit = item.unit
      this.form.members[index].origin = item.origin
    },
    // 自动计算 总价 = 单价 * 数量
    calculatePrice(scope, changeTotalPrice) {
      const price = scope.row.price
      const totalPrice = scope.row.totalPrice
      const qty = scope.row.qty
      if (changeTotalPrice) {
        if (qty) {
          scope.row.price = divide(totalPrice, qty)
        }
      } else {
        if (price && qty) {
          scope.row.totalPrice = mul(qty, price)
        }
      }
    },
    // 批量上传产品弹出框
    showImportItemDialog() {
      this.$refs.importMemberDialog.show()
    },
    // 删除商品明细
    deleteMember(item) {
      const members = this.form.members
      var index = members.indexOf(item)
      if (index !== -1) {
        members.splice(index, 1)
      }
    },
    // 商品合计
    getSummaries(param) {
      const { data } = param
      const sums = []
      let totalPrice = 0
      let qty = 0
      if (!data || data.length === 0) {
        return sums
      }
      // 合计数量总价
      data.map(item => {
        totalPrice = add(totalPrice, item.totalPrice)
        qty = add(qty, item.qty)
      })
      sums[0] = '合计'
      sums[6] = qty
      sums[8] = totalPrice
      this.totalPrice = totalPrice
      this.totalQty = qty
      this.form.temFee = this.totalPrice
      return sums
    },
    // 变更付款比例
    changePayPercent(percent) {
      this.form.temFee = mul(this.totalPrice, percent)
    },
    // 收款方列表
    getSupplierBankList(query) {
      const supplierId = this.form.supplierId
      if (supplierId) {
        this.supplierBankLoading = true
        setTimeout(() => {
          supplierBankList({ keyword: query, page: 1, size: 10, supplierId: supplierId }).then(res => {
            this.supplierBankList = res
            this.supplierBankLoading = false
          }).catch(() => { this.supplierBankLoading = false })
        }, 200)
      }
    },
    // 提货地址
    getPickAddressList(query) {
      const supplierId = this.form.supplierId
      if (supplierId) {
        this.pickAddressLoading = true
        setTimeout(() => {
          pickAddressList({ keyword: query, page: 1, size: 10, supplierId: supplierId }).then(res => {
            this.pickAddressList = res
            this.pickAddressLoading = false
          }).catch(() => { this.pickAddressLoading = false })
        }, 200)
      }
    },
    // 构建提货联系人及电话
    buildPickAddressInfo() {
      const pickAddress = this.form.pickAddress
      if (pickAddress) {
        return strJoin(' ', [pickAddress.name, pickAddress.tel, pickAddress.phone])
      }
    },
    // 变更收货方式
    changeReceivingMode(receivingMode) {
      // 自营自动将承运商默认第一项
      if (this.form.receivingMode === 1) {
        const selfExpressCompanyArray = this.$store.getters.dictSelectData.escm_self_express_company
        const selfExpressCompany = selfExpressCompanyArray && selfExpressCompanyArray.length > 0 ? selfExpressCompanyArray[0] : ''
        this.form.expressCompany = selfExpressCompany
        this.disabledExpressCompany = true
        // 触发变更承运商 带出承运商时效要求
        this.changeExpressCompany(selfExpressCompany)
      } else {
        this.form.expressCompany = ''
        this.disabledExpressCompany = false
      }
      // 非自提 且单个交货点
      if (receivingMode !== 0 && this.form.deliveryType === 0) {
        this.getDeliveryAddressList()
      }
    },
    // 变更收货方式
    changeDeliveryType(deliveryType) {
      // 单个交货点 且非自提
      if (deliveryType === 0 && this.form.receivingMode !== 0) {
        this.getDeliveryAddressList()
      }
    },
    // 变更国内承运商
    changeExpressCompany(expressCompany) {
      // 清楚之前选择的时效要求
      this.form.timelinessRequirement = ''
      this.timelinessRequirementList = []
      // 获取国内承运商时效要求
      selectByPid('escm_timeliness_requirement', expressCompany.id).then(res => {
        this.timelinessRequirementList = res
      })
    },
    // 收货地址
    getDeliveryAddressList(query) {
      this.deliveryAddressLoading = true
      setTimeout(() => {
        deliveryAddressList({ keyword: query, page: 1, size: 10 }).then(res => {
          this.deliveryAddressList = res
          this.deliveryAddressLoading = false
        }).catch(() => { this.deliveryAddressLoading = false })
      }, 200)
    },
    // 构建收货联系人及电话
    buildDeliveryAddressInfo() {
      const deliveryAddress = this.form.deliveryAddress
      if (deliveryAddress) {
        return strJoin(' ', [deliveryAddress.name, deliveryAddress.tel, deliveryAddress.phone])
      }
    },
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log(this.form)
        } else {
          setTimeout(() => {
            // 获取校验错误的el-form-item
            var errorItems = document.getElementsByClassName('is-error')
            if (errorItems && errorItems.length > 0) {
              // 使错误的第一个获取焦点
              errorItems[0].querySelector('input').focus()
            }
          }, 100)
          return false
        }
      })
    }
  }
}
</script>
